<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tab{
      border-collapse: collapse;
    }
    th,td{
      width: 100px;
      height: 50px;
      border: 1px solid #333;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="box"></div>

  <script>
    var data = [
      { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "", Comment: "" },
      { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "", Comment: "" },
      { StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "", Comment: "" },
      { StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "", Comment: "" },
      { StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "", Comment: "" },
      { StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "", Comment: "" },
      { StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "", Comment: "" },
      { StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "", Comment: "" }
    ];
    function ScoreHandling(data) {
      this.data = data;
    }
    /* ScoreHandling.prototype.scoreSort = function (data, subject, subjectText) {
      data.sort(function (a, b) {
        return b[subject] - a[subject];
      })
      console.log(subjectText + '第一名的学号为：' + data[0].StudentNumber + '; 成绩为：' + data[0][subject] + '分 ');
    } */
    ScoreHandling.prototype.outputScore = function () {
      let _data = this.data;
      for (let i of data) {
        i.TotalScore = i.Chinese + i.Math + i.English;
        var avg = (i.TotalScore / 3).toFixed(1);
        if (avg >= 90) {
          i.Comment = 'A';
        } else if (avg >= 80) {
          i.Comment = 'B';
        } else if (avg >= 70) {
          i.Comment = 'C';
        } else if (avg >= 60) {
          i.Comment = 'D';
        } else {
          i.Comment = 'E';
        }
      }
      /* console.log(_data);
      this.scoreSort(_data, 'TotalScore', '总成绩');
      this.scoreSort(_data, 'Chinese', '语文');
      this.scoreSort(_data, 'Math', '数学');
      this.scoreSort(_data, 'English', '英语');
 */
      //可以分步计算总分、语文、数学、英语最大成绩
      _data.sort(function(a,b){
        return b.TotalScore-a.TotalScore;
      })
      console.log('第一名的学号为：' + _data[0].StudentNumber+'; 成绩为：'+ _data[0].TotalScore + '分 ');
   
    }
    var score01 = new ScoreHandling(data);
    score01.outputScore();
    var _data=score01.data;

    function Table(data){
      this.data = data;
    }
    Table.prototype.createTable=function(){
      let _data=this.data;
      var _html='<table class="tab"><tr><th>学号</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th><th>等级</th></tr>';
        for(let r=0;r<_data.length;r++){
          _html+='<tr>';
            for(let c in _data[r]){
              _html+='<td>'+_data[r][c]+'</td>';
            }
            _html+='</tr>';
        }
        _html+='</table>';
        return _html;
    }
    var table01=new Table(_data);
    document.getElementById('box').innerHTML=table01.createTable();
  </script>
</body>

</html>